<template>
  <view class="content">
    <!-- ========== 条件判断 v-if 区域 ========== -->
    <!-- 1. 根据布尔值 raining 判断 -->
    <view v-if="!raining">今天天气真好</view>
    <view v-else>下雨天，只能在家呆着了</view>

    <!-- 2. 根据 state 的值判断 -->
    <view v-if="state === 'vue'">state 的值是 Vue</view>

    <!-- 3. 三元表达式简洁写法 -->
    <view>State is {{ state === 'vue' ? 'vue' : 'App' }}</view>

    <!-- 4. v-if / v-else-if / v-else 完整分支 -->
    <view>
      <view v-if="state === 'vue'">uni-app</view>
      <view v-else-if="state === 'html'">HTML</view>
      <view v-else>APP</view>
    </view>

    <!-- 5. 点击切换 state 的按钮 -->
    <image class="logo" src="/static/logo.png" @click="change" />

    <!-- ========== 列表渲染 v-for 区域 ========== -->
    <!-- 6. 遍历数组 arr -->
    <view class="title">数组渲染</view>
    <view v-for="item in arr" :key="item.id" class="list-item">
      {{ item.id }}: {{ item.name }}
    </view>

    <!-- 7. 遍历数字 4 次 -->
    <view class="title">数字循环</view>
    <view v-for="(item, index) in 4" :key="index" class="list-item">
      <text :class="'list-' + (index % 2)">index % 2 = {{ index % 2 }}</text>
    </view>

    <!-- 8. 遍历对象 object -->
    <view class="title">对象遍历</view>
    <view v-for="(value, name, index) in object" :key="name" class="list-item">
      {{ index }}. {{ name }}: {{ value }}
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      raining: false,        // 控制天气显示
      state: 'vue',          // 控制多分支显示
      arr: [                 // 数组列表
        { id: 1, name: 'uni-app' },
        { id: 2, name: 'HTML' }
      ],
      object: {              // 对象遍历
        title: 'How to do lists in Vue',
        author: 'Jane Doe',
        publishedAt: '2020-04-10'
      }
    };
  },
  methods: {
    // 点击 logo 循环切换 state
    change() {
      const arr = ['vue', 'html', 'other'];
      const idx = arr.indexOf(this.state);
      this.state = arr[(idx + 1) % arr.length];
    }
  }
};
</script>

<style scoped>
.content {
  padding: 40rpx;
}
.logo {
  width: 120rpx;
  height: 120rpx;
  margin: 20rpx 0;
}
.title {
  margin-top: 30rpx;
  font-weight: bold;
  color: #333;
}
.list-item {
  line-height: 1.8;
  color: #0000ff;
}
.list-0 {
  background-color: #f0f0f0;
}
.list-1 {
  background-color: #d0d0d0;
}
</style>